<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传列表</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

 
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
 
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
	table.render({
    elem: '#demo'
    ,height: 500
    ,skin: 'line' //行边框风格
    ,even: true //开启隔行背景
    ,url: './show' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
    	{field: 'id', title: 'id', width:300, fixed: 'left',sort:true}
      ,{field: 'username', title: '用户名', width:300, sort: true}
      ,{field: 'filename', title: '文件名', width:300}
      ,{field: 'location', title: '文件位置', width:200,edit:"text"  }
      ,{field: 'dd', title: '操作', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
  	,toolbar:'default'
  	,page:true
  	,loading:true
  	,title:"用户表"

  });
  
  
	var checkStatus = table.checkStatus('test'); //test 即为基础参数 id 对应的值
	 
	console.log(checkStatus.data) //获取选中行的数据
	console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
	console.log(checkStatus.isAll ) //表格是否全选
  
	//监听工具条 
	table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	 
	  if(layEvent === 'detail'){ //查看
	    //do somehing
	  } else if(layEvent === 'del'){ //删除
	    layer.confirm('真的删除行么', function(index){
	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	      layer.close(index);
	      //向服务端发送删除指令
	    });
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    
	    //同步更新缓存对应的值
	    obj.update({
	      username: '123'
	      ,title: 'xxx'
	    });
	  } else if(layEvent === 'LAYTABLE_TIPS'){
	    layer.alert('Hi，头部工具栏扩展的右侧图标。');
	  }
	});
});


</script>
</body>
</html>
</body>
</html>